import {Component} from '@angular/core';
import {select, Store} from "@ngrx/store";
import {Router} from "@angular/router";
import {ListActions} from "../store/actions/list.actions";
import {List} from "../store/model/list.model";
import {selectAllItems} from "../store/selectors/list.selectors";
import {selectAll, selectEntities, selectIds} from "../store/entity/list.entity";
import {selectRouter} from "../store/selectors/router.selectors";
import {RouterReducerState} from "@ngrx/router-store";

export interface Data {
  id: number;
  name: string;
  age: number;
}

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less']
})
export class ListComponent {
  checked = false;
  loading = false;
  indeterminate = false;
  listOfData: List[] = [];
  listOfCurrentPageData: readonly Data[] = [];
  setOfCheckedId = new Set<number>();

  // private store: Store<{ list: { list: List[] } }>,
  constructor(
    private store: Store<{ list: { entities: List[] } }>,
    private router: Router) {
    // store.select('list').pipe().subscribe((res) => {
    //   console.log('res',res)
    //   this.listOfData = res.list
    // });
    // store.select(selectAllItems)
    //   .subscribe((res) => {
    //     console.log('selectAllItems', res)
    //   });
    store.select('list').pipe().subscribe((res) => {
      console.log('res',res)
      this.listOfData = Object.values(res.entities)
    });
    // 路由放在Store里面，每次路由跳转，都会进入到这方法里面。
    store.pipe(select(selectRouter)).subscribe((routerState: RouterReducerState<any>) => {
      // 处理选择的 router state
      console.log('list routerState',routerState)
    });
  }

  updateCheckedSet(id: number, checked: boolean): void {
    if (checked) {
      this.setOfCheckedId.add(id);
    } else {
      this.setOfCheckedId.delete(id);
    }
  }

  onCurrentPageDataChange(listOfCurrentPageData: readonly Data[]): void {
    this.listOfCurrentPageData = listOfCurrentPageData;
    this.refreshCheckedStatus();
  }

  refreshCheckedStatus(): void {
    const listOfEnabledData = this.listOfCurrentPageData;
    this.checked = listOfEnabledData.every(({id}) => this.setOfCheckedId.has(id));
    this.indeterminate = listOfEnabledData.some(({id}) => this.setOfCheckedId.has(id)) && !this.checked;
  }

  onItemChecked(id: number, checked: boolean): void {
    this.updateCheckedSet(id, checked);
    this.refreshCheckedStatus();
  }

  onAllChecked(checked: boolean): void {
    this.listOfCurrentPageData
      .forEach(({id}) => this.updateCheckedSet(id, checked));
    this.refreshCheckedStatus();
  }

  multipleDel(): void {
    this.loading = true;
    const requestData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id));
    console.log(requestData);
    // this.store.dispatch(ListActions.deleteMultipleLists({
    //   data: requestData
    // }))
    this.store.dispatch(ListActions.removeMultipleEntity({
      data: requestData
    }))
    this.setOfCheckedId.clear();
    this.refreshCheckedStatus();
    this.loading = false;

  }

  ngOnInit(): void {

  }

  del(data: {
    id: number,
    name: string,
    age: number,
  }) {
    const {id} = data;
    // this.store.dispatch(ListActions.deleteLists({
    //   data: {
    //     id
    //   }
    // }))
    this.store.dispatch(ListActions.removeEntity({
      data: {
        id
      }
    }))
  }

  goUpdatePage(data: {
    id: number,
    name: string,
    age: number,
  }) {
    const {id,name,age} = data;
    this.router.navigate(["/update-list"], {
      queryParams: {
        id,name,age
      }
    })
  }
}
